<template>
<div class="app-container">
    <div class="top-box clearfix">
        <el-input class="likeWordInput" v-model="queryParams.likeWord" @keyup.enter.native="query()" placeholder="名称/URL 模糊查询"></el-input>
        <el-select v-model="queryParams.groupId" placeholder="选择组">
            <el-option label="所有组" key="-1" value="-1"></el-option>
            <el-option label="空" key="0" value="0"></el-option>
            <el-option v-for="(k,v) in groupsMap" :label="k" :key="k" :value="v"></el-option>
        </el-select>
        <el-select v-model="queryParams.method" placeholder="方法选择">
            <el-option value="-1" label="所有方法"></el-option>
            <el-option v-for="(k,v) in httpMethodMap" :label="k" :value="v" :key="v" ></el-option>
        </el-select>
        <div class="btn-box">
            <el-button class="addBtn" type="primary" @click="toAdd()">添加</el-button>
            <el-button class="addBtn" type="success"  @click="query()">查询</el-button>
        </div>

    </div>
    <div class="resource-table-box">
        <table class="z-table" style="width: 100%">
            <thead>
            <tr>
                <th>ID</th>
                <th>名称</th>
                <th>方法</th>
                <th>URL</th>
                <th>状态</th>
                <th>组</th>
                <th>备注</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="r of resources" :key="r.id">
                <td>{{r.id}}</td>
                <td>{{r.name}}</td>
                <td><http-method :methodId="r.method" size="small"></http-method></td>
                <td>{{r.url}}</td>
                <td>{{statusMap[r.status]}}</td>
                <td v-if="r.groupId">{{groupsMap[r.groupId]}}</td>
                <td v-else>空</td>
                <td>{{r.remark}}</td>
                <td>
                    <a class="z-label" @click="toEdit(r)">编辑</a>
                    <a class="z-label danger" @click="deleteById(r.id)">删除</a>
                </td>
            </tr>
            </tbody>
        </table>


        <div class="pagination-box">
            <el-pagination
                class="pagination"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="queryParams.pageCount"
                :page-sizes="[10, 20, 30, 50,80]"
                :page-size="queryParams.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="queryParams.total">
            </el-pagination>

        </div>
    </div>
</div>
</template>

<script>
    import '@/styles/form-box.css'
    import global from '../../utils/global'
    import resourceApi from '../../api/resource'
    import resourceGroupApi from '../../api/resourceGroup'
    import {Message, MessageBox} from 'element-ui'
    //components
    import httpMethod from '@/components/HttpMethod/index'


    //GET, HEAD, POST, PUT, PATCH, DELETE, OPTIONS, TRACE;
    //0    1     2     3    4      5       6        7




    export default {
        name: "resource-manager",
        data:function () {
            return {
                resources:[],
                statusMap:global.resourceStatusMap,
                groupsMap:{},
                queryParams:{
                    //page
                    pageCount:1,
                    pageSize:10,
                    //condition
                    groupId:'-1',
                    method:'-1',
                    likeWord:'',
                    total:0
                },
                httpMethodMap:global.httpMethodMap
            }
        },
        methods:{
            toEdit:function (r) {
                //TODO 跳转到resource edit页面
                this.$router.push('/security/resource-manager-edit/'+r.id)
            },
            toAdd:function () {
                //跳转到添加页面
                this.$router.push('/security/resource-manager-add');
            },
            deleteById:function (id) {
                const _this = this;
                resourceApi.deleteById(id)
                    .then(function (data) {
                        if (data.success){
                            _this.query()
                            return
                        }
                        Message.error('删除失败')
                    }).catch(function () {
                        Message.success('删除失败')
                    })
            },
            query:function () {
                const _this = this;
                resourceApi.findByPageAndCondition(_this.queryParams)
                    .then(function (data) {
                        _this.resources = data.items
                        _this.queryParams.total = data.total
                        _this.queryParams.pageSize = data.pageSize
                        _this.queryParams.pageCount = data.pageCount
                    })
            },
            handleSizeChange:function () {
                this.query()
            },
            handleCurrentChange:function () {
                this.query()
            }
        },
        mounted:function () {
            //加载所有resource
            const _this = this;
            _this.query()
            resourceGroupApi.findAll()
                .then(function (data) {
                    console.log(data)
                    if (data != null) {
                        data.forEach(function (group) {
                            _this.$set(_this.groupsMap,group.id.toString(),group.name)
                        })
                        console.log("adsf")
                        console.log(_this.groupsMap)
                    }else{
                        Message.error('资源组加载失败')
                    }
                    console.log(_this.groupsMap)
                }).catch(function () {
                    Message.error('资源组加载失败')
                })
        },
        components:{
            'http-method':httpMethod
        }
    }
</script>

<style scoped>
    .top-box {
        width: 100%;
    }
    .top-box>*{
        float: left;
        margin-right: 10px;
    }
    .top-box .likeWordInput{
        width: 190px;
    }
    .top-box .btn-box{
        float: right;
    }



</style>
